<template>
  <div style="margin:50px;border:1px #e0e0e0 solid;padding:20px;">
    <div style="margin-bottom:50px;">
      <span style="font-size:40px;bold">人才招募</span>
    </div>
    <div style="margin-left:50px;margin-right:50px;margin-bottom:50px;min-height:1px;background-color:#e0e0e0;"></div>
    <div class="clearfix" id="titleBar" :class="{titleBarFixed:titleBarFixed}" style="background-color:white">
      <ul class="clearfix">
        <li v-for="(item,index) in jobs" v-bind:key="index">
          <div @click="itemClick(index)" :class="{listSelect: index == selectedItem,hover: index != selectedItem}">
            <span>{{item.title}}</span>
          </div>
        </li>
      </ul>
    </div>
  <div :class="{placeholder:titleBarFixed}"></div>
    <div id="detail">
      <div v-for="(item, index) in jobs" :key="index" style="margin-top:20px" :id="'detail'+index">
        <div class="clearfix">
          <div style="width:2px;height:20px;float:left;background-color:#01B49E"></div>
          <div style="float:left;margin-left:10px;text-align:center;">
            <span>{{item.title}}</span>
          </div>
        </div>
        <div style="background-color:#f8f8f8;width:700px;margin-top:10px">
          <span style="margin:5px 20px">有意向应聘者请将作品发送至：111111111</span>
        </div>
        <div class="clearfix" style="margin-top:10px;">
          <div style="float:left">
            <span>工作职责：</span>
          </div>
          <div style="float:left">
            <div v-for="(itemDetail,index) in item.duty" :key="index">
              <span style="line-height:32px;">{{itemDetail}}</span>
            </div>
          </div>
        </div>
        <div class="clearfix" style="margin-top:20px">
          <div style="float:left">
            <span>任职资格：</span>
          </div>
          <div style="float:left">
            <div v-for="(itemDetail,index) in item.quality" :key="index">
              <span style="line-height:32px;">{{itemDetail}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.title {
  font-size: 10sp;
}
.placeholder{
  height:40px;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  float: left;
}

li div {
  width: 100px;
  height: 40px;
  text-align: center;
  border: 1px #e0e0e0 solid;
}
li div span {
  font-size: 15px;
  margin-top:12px;
  display: inline-block;
}
.hover:hover {
  color: #01B49E;
}

.listSelect {
  background-color: #01B49E;
  color: white;
}

.titleBarFixed {
  position: fixed;
  top: 0;
  z-index: 2;
}

ul {
  list-style: none;
}
</style>
<script>
export default {
  data: function() {
    return {
      jobs: [
        {
          title: '职位分析师',
          duty: ['1. 根据行业分类，研究分析项目职位岗位需求和市场行业趋势；',
            '2. 能够准确把握企业HR的职位招聘方向及用人喜好，提供招聘方案跟计划；',
            '3. 对接企业HR，协调猎头与HR的配合，传递信息，引导职位招聘进度跟各个环节，达成高效招聘；',
            '4. 与猎头、HR保持良好的合作与沟通，建立充分的信任关系。'
          ],
          quality: ['1. 沟通能力强、具备运营逻辑和分析能力、思考问题细致、情商高；',
            '2. 对互联网行业、招聘、人才市场领域有兴趣，愿意研究这个行业，熟悉互联网岗位情况的尤佳；',
            '3. 了解企业招聘配合流程的尤佳；',
            '4. 学习能力强，对于新鲜事物有挑战精神，积极主动；',
            '5. 有猎头经验或者HR招聘经验的尤佳。']
        },
        {
          title: '职位分析师',
          duty: ['1. 根据行业分类，研究分析项目职位岗位需求和市场行业趋势；',
            '2. 能够准确把握企业HR的职位招聘方向及用人喜好，提供招聘方案跟计划；',
            '3. 对接企业HR，协调猎头与HR的配合，传递信息，引导职位招聘进度跟各个环节，达成高效招聘；',
            '4. 与猎头、HR保持良好的合作与沟通，建立充分的信任关系。'
          ],
          quality: ['1. 沟通能力强、具备运营逻辑和分析能力、思考问题细致、情商高；',
            '2. 对互联网行业、招聘、人才市场领域有兴趣，愿意研究这个行业，熟悉互联网岗位情况的尤佳；',
            '3. 了解企业招聘配合流程的尤佳；',
            '4. 学习能力强，对于新鲜事物有挑战精神，积极主动；',
            '5. 有猎头经验或者HR招聘经验的尤佳。']
        },
        {
          title: '职位分析师',
          duty: ['1. 根据行业分类，研究分析项目职位岗位需求和市场行业趋势；',
            '2. 能够准确把握企业HR的职位招聘方向及用人喜好，提供招聘方案跟计划；',
            '3. 对接企业HR，协调猎头与HR的配合，传递信息，引导职位招聘进度跟各个环节，达成高效招聘；',
            '4. 与猎头、HR保持良好的合作与沟通，建立充分的信任关系。'
          ],
          quality: ['1. 沟通能力强、具备运营逻辑和分析能力、思考问题细致、情商高；',
            '2. 对互联网行业、招聘、人才市场领域有兴趣，愿意研究这个行业，熟悉互联网岗位情况的尤佳；',
            '3. 了解企业招聘配合流程的尤佳；',
            '4. 学习能力强，对于新鲜事物有挑战精神，积极主动；',
            '5. 有猎头经验或者HR招聘经验的尤佳。']
        },
        {
          title: '职位分析师',
          duty: ['1. 根据行业分类，研究分析项目职位岗位需求和市场行业趋势；',
            '2. 能够准确把握企业HR的职位招聘方向及用人喜好，提供招聘方案跟计划；',
            '3. 对接企业HR，协调猎头与HR的配合，传递信息，引导职位招聘进度跟各个环节，达成高效招聘；',
            '4. 与猎头、HR保持良好的合作与沟通，建立充分的信任关系。'
          ],
          quality: ['1. 沟通能力强、具备运营逻辑和分析能力、思考问题细致、情商高；',
            '2. 对互联网行业、招聘、人才市场领域有兴趣，愿意研究这个行业，熟悉互联网岗位情况的尤佳；',
            '3. 了解企业招聘配合流程的尤佳；',
            '4. 学习能力强，对于新鲜事物有挑战精神，积极主动；',
            '5. 有猎头经验或者HR招聘经验的尤佳。']
        }
      ],
      selectedItem: 0,
      titleBarFixed: false,
      titleOffsetTop: 0
    }
  },
  methods: {
    itemClick: function(index) {
      console.log(index)
      this.selectedItem = index
      document.querySelector('#detail' + index).scrollIntoView(true)
    },
    handleScroll: function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // var detailTop = document.querySelector('#detail').offsetTop
      // var detailHeight = document.querySelector('#detail').offsetHeight
      // var detailCount = document.querySelector('#detail').childElementCount
      // if ((scrollTop - detailTop) / (detailHeight / detailCount) > 0) {
      //   this.selectedItem = Math.floor((scrollTop - detailTop) / (detailHeight / detailCount))
      // }
      console.log(scrollTop)
      if (scrollTop > this.titleOffsetTop) {
        this.titleBarFixed = true
      } else {
        this.titleBarFixed = false
      }
    },
    jumpTo: function(index) {
      document.querySelector('#detail' + index).scrollIntoView(true)
    }
  },
  computed: {
    isSelected: function(index) {
      return {
        listSelect: this.jobs[index] === this.selectedItem
      }
    }
  },
  mounted() {
    this.titleOffsetTop = document.querySelector('#titleBar').offsetTop
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>
